<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<!-- 样式类名操作：针对css3：添加、移除、切换的元素"类名"操作
		     addClass()      有参：分为一个参和多个参
			 、              语法：addClass("类名")
			                      <p class="类名">
							 语法：addClass("类名1 类名2")
							      <p class="类名1 类名2">
							 功能：匹配元素集合中的所有元素
							      添加一个或者多个类名操作
							 理解：元素添加存在的样式
			                 
			 removeClass()   功能：匹配元素集合中的所有元素
							      移除一个或者多个类名操作
			 toggleClass()   功能：如果元素有类名则移除，没有则添加
			 hasClass()      功能：检查匹配的元素集合中是否包含指定类名
			                        返回值bool
			 -->
			 <!-- 要求1：jq引入
			          2：html写两个div，一前一后  div id="targetElement"
						                4个按钮      id="addClassBtn"
										            id="removeClassBtn"
													id="toggleClassBtn"
													id="hasClassBtn"
											    div id="resultArea"
					 3:css: .bgColor{ 300*300 背景色随意}
					        .broders{ 10个像素实线红色边框  倒角画圆}
						 -->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.bgColor{
				width: 300px;
				height: 300px;
				background: #f00;
			}
			.broders{
				border: 10px solid #ff0;
				border-radius: 50%;
			}
		</style>
		</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">检查类名是否存在</button>
		<div id="resultArea"></div>
		<script>
			//1.点击 添加类名 按钮 添加效果【样式】 300*300 背景色红色
			$("#addClassBtn").click(function(){
				////添加样式--存在样式：类名
				$("#targetElement").addClass("bgColor");
			    $("#resultArea").html("<h4>添加样式类名:bgColor</h4>");
			});
			//2.点击 添加类名 按钮 添加效果【样式】 300*300 背景色红色 圆 外层 10px 黄色的框
			$("#targetElement").addClass("bgColor broders");
			//3.点击 移除类名 按钮 添加效果【样式】 300*300 背景色红色 圆 外层 10px 黄色的框
			$("#removeClassBtn").click(function(){
				$("#targetElement").removeClass("broders");
			    $("#resultArea").html("<h4>移除样式类名:bgColor</h4>");
				});
			//4.点击 切换类名 按钮 添加效果【样式】 300*300 背景色红色 圆 外层 10px 黄色的框
			$("#toggleClassBtn").click(function(){
				$("#targetElement").toggleClass("broders");
			    $("#resultArea").html("<h4>切换样式类名:broders</h4>");
				});
			//5.点击 切换类名 按钮 添加效果【样式】 去掉 300*300 背景色红色
			 $("#toggleClassBtn").click(function(){
			 	$("#targetElement").toggleClass("bgColor");
			     $("#resultArea").html("<h4>切换样式类名:broders</h4>");
				 });
			//6.检查类名是否存在:true 存在 false不存在
			 $("#hasClassBtn").click(function(){
			 	var hc=$("#targetElement").hasClass("broders");
			     $("#resultArea").text("检查当前样式是否存在："+hc);
			 	});
		</script>
	</body>
</html>